시멘틱 마크업

❓질문

시맨틱 마크업이란 무엇이며, 왜 중요한가요?

💡 조사하기전 내가 알고 있던 내용

시맨틱 마크업이란 HTML에 정의할수있는 태그입니다 그러나 이 태그가 특별히 어떤용도로 쓰인다기보다는 그냥 <div> 태그와 동일한 역할을 수행합니다.

그렇다면 이 시맨틱 마크업이 왜 중요한지 설명하면 일단 웹 사이트의 구조를 쉽게 읽을수있게됩니다
HTML의 상단의 헤더 태그<header> , 본문의 아티클과 섹션 태그 <article> <section>
하단의 푸터 태그 <footer> 등 HTML의 구조를 한눈에 파악할수있게 됩니다.

이는 개발자뿐만 아니라 SEO를 담당하는 봇에게도 해당되는 말입니다 홈페이지의 구조를 쉽게 파악하고 SEO의 점수를 높게 받아 검색시 상단에 위치할 수 있게 해줍니다.

두번째로는 웹 접근성이랑도 관련이 있습니다. 웹 접근성에서 aira 같은 속성처럼 웹 사이트의 구조를 명시 해두면 시작 장애인들이나 노인 등 다양한 사용자층이 효과적으로 탐색할 수 있게 도와주는 역할도 합니다.

🏫 정리한 내용

추가적으로 클라이언트 사이드 렌더링에서도 시맨틱 마크업이 SEO에 영향을 줄 수 있는지에 대한 설명입니다.

CSR에서는 대부분 콘텐츠가 클라이언트 측에서 렌더링되기 떄문에, 검색 엔진이 페이지를 크롤리할 때 페이지의 초기 콘텐츠만 인식할 가능성이 큽니다. 그렇더라도 최근 검색 엔진들은 자바스크립트렌더링을 지원하는 방향으로 진화하고 있으며 페이지의 시맨틱 구조를 어느 정도 파악할 수 있습니다. 따라서 시맨틱 마크업을 제대로 적용하면 클라이언트 사이드 렌더링에서도 검색엔진이 콘텐츠의 중요한 부분을 더 쉽게 인식하게 되어 검색 결과에 긍정적인 영향을 미칠 수 있습니다.